<template>
	<view class="content" v-if="show">
		<view class="checkWrap" :style="'width:'+(barWidth+32)+'rpx'">
			<u-icon name="close" color="#AAA" size="30" class="absolute" style="top: 40rpx;right: 40rpx;" @click="closeHumanCheckHandle()"></u-icon>
			<view class="h2 text-center">人机验证</view>
			<view class="codeVue margin40 flex align-center">
				<input type="text" placeholder="输入计算结果" placeholder-style="color: #989898;font-size:26rpx;" v-model="imgCode" />
				<image class="verityCode" :src="'data:image/jpg;base64,' + src" mode="heightFix" @click="getCode()" v-if="src"></image>
			</view>
			<view class="refrensh text-right" @click="getCode()">点击刷新/获取图形</view>
			<view class="checkBox margin30">
				<view class="checkBar">
					<view class="slide">
						<view 
							:class="'moveBac '+(isAnimation?'animation':'')+(isSuccess?' moveBacSuccess':'')" 
							:style="'width:'+(blockLeft+6)+'rpx;background-color:'+swiperColor"></view>
						<view 
							:class="(isSuccess?'swiperTipsSuccess':'swiperTips')"
						>{{isSuccess?checkSuccessText:actionTips}}</view>
						<view 
							:class="'swiperBlock '+(isAnimation?'animation':'')+(isSuccess?' successBlock':'') "  
							:style="'left:'+blockLeft+'rpx'" 
							@touchstart="touchstartHandle"  
							@touchmove.stop.prevent="touchmoveHandle"  
							@touchend="touchendHandle"  
						></view>
					</view>
				</view>
			</view>
			<view class="confirm margin50" @click="confirm">确认</view>
		</view>
	</view>
</template>

<script>
import { mapState } from "vuex"
export default {
	props: {
		show: {
			type: Boolean,
			default: false
		},
		swiperColor: {
			type: String,
			default: 'rgba(36, 117, 255, 0.5)'
		},
		actionTips:{
			type: String,
			default: '请按住滑块，拖动到最右边'
		},
		checkSuccessText:{
			type: String,
			default: '校验成功'
		},
		barWidth:{
			type:Number,
			default:568
		}
	},
	computed: {
		trueMoveableW: function(){
			return this.barWidth - 166
		}
	},
	watch:{
		show:function(val){
			if(!val){
				this.blockLeft=0
				this.isSuccess=false
			}
		}
	},
	data() {
		return {
			startInfo:{},
			blockLeft:0,
			isAnimation:false,
			isSuccess:false,
			imgCode: '',
			src: '',
			uuid: '',
			// trueMoveableW: 0
		};
	},
	watch:{
		show:function(val){
			if(!val){
				this.blockLeft = 0
				this.isSuccess = false
			}
		},
	},
	methods: {
		async getCode() {
			uni.showLoading()
			let res = await this.$request('/front/search/captchaImage');
			console.log(res);
			if (res.code === 0) {
				uni.hideLoading()
				this.src = res.obj.img;
				this.uuid = res.obj.uuid;
			} else {
				uni.hideLoading()
				this.$u.toast(res.msg);
			}
		},
		//手指按下
		touchstartHandle({changedTouches}){
			if(this.isSuccess){
				return
			}
			this.isAnimation=false
			this.startInfo=changedTouches[0]
		},
		// 手指移动
		touchmoveHandle({changedTouches}){
			if(this.isSuccess){
				return
			}
			let blockLeft=changedTouches[0].clientX-this.startInfo.clientX
			let blockLeftRpx = blockLeft/(uni.upx2px(100)/100)
			if(blockLeftRpx<0){
				this.blockLeft=0
			}else{
				this.blockLeft=blockLeftRpx <= this.barWidth - 166 ? blockLeftRpx : this.barWidth - 166
			}
		},
		confirm(){
			if(!this.imgCode) return this.$u.toast("请输入图形验证码")
			if(!this.isSuccess) return this.$u.toast("请按住滑块，拖动到最右边")
			this.$emit('close')
			this.$emit('checkResult', this.uuid, this.imgCode)
		},
		// 手指离开
		touchendHandle(e){
			if(this.isSuccess){
				return
			}
			if(this.barWidth - 166 ===this.blockLeft){
				this.isSuccess = true
			}else{
				this.isAnimation=true
				let timeid=setTimeout(()=>{
					clearTimeout(timeid)
					this.isAnimation=false
				},500)
				this.blockLeft=0
			}
		},
		closeHumanCheckHandle(){
			this.imgCode = ""
			this.blockLeft = 0
			this.isSuccess = false
			this.$emit('close')
		}
	}
};
</script>

<style scoped lang="less">
.content {
	position: fixed;
	background: rgba(0, 0, 0, 0.5);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1001;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border-radius: 10rpx;
	box-sizing: border-box;
	.checkWrap {
		width: 680rpx;
		border-radius: 8rpx;
		background: #fff;
		overflow: hidden;
		padding: 60rpx 40rpx;
		box-sizing: border-box;
		position: relative;
		.h2 {
			font-size: 32rpx;
			font-weight: 600;
		}
		.refrensh {
			color: #AAA;
			font-size: 26rpx;
			padding-top: 30rpx;
		}
		.confirm {
			width: 520rpx;
			height: 92rpx;
			text-align: center;
			line-height: 92rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: 600;
			background: #5865F2;
			border-radius: 15rpx;
		}
		.codeVue {
			width: 100%;
			height: 112rpx;
			background: #F4F4F4;
			border-radius: 18rpx;
			input {
				display: block;
				padding-left: 30rpx;
				font-size: 28rpx;
				flex: 1;
				color: #333;
			}
			.sendCode {
				color: #2475ff;
				padding-right: 30rpx;
				font-size: 26rpx;
				font-weight: 600;
			}
			image {
				height: 112rpx;
				max-width: 200;
				border-radius: 15rpx;
			}
		}
	
		.checkBox {
			width: 100%;
			box-sizing: border-box;
			border-radius: 18rpx;
			background: #f4f4f4;
		}
		.checkBar {
			width: 100%;
			padding: 16rpx;
		}
		.slide {
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			border-radius: 8rpx;
			background: #fff;
			position: relative;
			font-size: 26rpx;
			overflow: hidden;
		}
	}
}

.moveBac{
	background: rgba(9, 192, 19, 1);
	width: 100%;
	height: 100%;
}
.moveBacSuccess{
	background-color: #09C013 !important;
}
.swiperTips{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	color: #FFFFFF;
	text-align: center;
	background: -webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
	animation: tipsBlinkan 3s infinite;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.swiperTipsSuccess{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	text-align: center;
	color: #FFFFFF;
}
.slide .swiperBlock {
	width: 86rpx;
	height: 100%;
	border-radius: 8rpx;
	background-color: #ffffff;
	/* box-shadow: 0 0 6px 1px #b3b3b3; */
	background-image: url('');
	background-repeat: no-repeat;
	background-size: 46rpx;
	background-position: center;
	position: absolute;
	left: 0px;
	top: 0;
	border: 1px solid #808080;
}
.successBlock{
	background-image: url('') !important;
}
.animation{
	transition: all 0.5s;
}

@keyframes tipsBlinkan{
	0% {
	    background-position: -200rpx 0;
	}
	100% {
	    background-position: 200rpx 0;
	}
}
</style>
